{extend name="$adminPage"}

{block name="headStyle"}
<style type="text/css">
    .yunj-icon-doc {
        display: flex;
        flex-wrap: wrap;
    }
    .yunj-icon-doc li{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 100px;
        color: #8a8a8a;
    }
    .yunj-icon-doc li i{
        font-size: 28px;
    }
    .yunj-icon-doc li .icon-title{
        margin: 5px 0;
    }
</style>
{/block}

{block name="content"}
<blockquote class="layui-elem-quote">
    <p><b>云静Admin</b>所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。
        因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。
        你可以通过 <em>font-class</em>来定义不同的图标。</p>
</blockquote>
<pre class="layui-code">
使用示例如下：
{php}echo htmlspecialchars("<i class=\"yunj-icon yunj-icon-list\"></i>");{/php}
</pre>
<ul class="yunj-icon-doc">
    {foreach $icon as $v}
    <li>
        <i class="yunj-icon {$v.class}"></i>
        <div class="icon-title">{$v.title}</div>
        <div class="icon-class">yunj-icon</div>
        <div class="icon-class">{$v.class}</div>
    </li>
    {/foreach}
</ul>
{/block}